final-finn

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<<set $r1 to 0>><<set $r2 to 0>><<set $r3 to 0>> <style>.container { display: grid; grid-template-areas: "header header" "menu content" "footer footer"; grid-template-columns: 2fr 3fr; gap: 5px; background-color: black; padding: 5px; } .container > div { background-color: black; padding: 10px; } .container > div.header { grid-area: header; text-align: center; } .container > div.menu { grid-area: menu; } .container > div.content { grid-area: content; } </style> <div class="container"> <div class="header"><h1>WELCOME TO THE DILEMMA</h1></div> <div class="menu"><h3>before we start, I want to get to know you better. please fill out this form and we can continue on. CONTENT WARNING - Flashing lights - Blood - Death <br><br><em><strong>Created By <br>Finn Gordon</strong></em></h3> </div> <div class="content">NAME: <<textbox "$name" "">><br> MOMS NAME: <<textbox "$mom" "">><br> FAVORITE DRINK: <<textbox "$drink" "">> CUSTOMIZE YOURSELF: <<cycle "$you" autoselect>> <<option "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> <<option "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> <</cycle>> <br><<button "SUBMIT" "start">><<script>>/* (code) */<</script>><</button>> </div>

<div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/trolley%20normal/tube/Screenshot%202025-12-08%2010.03.48%20AM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/mom/boots/Screenshot%202025-12-08%2010.28.45%20AM.png]] <</if>> </div> <div class="layout-text"> <<type 35ms>>You kill the person on the track. <</type>> <<button "next" "lever 1">><<script>>/* (code) */<</script>><</button>> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div>

<div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/trolley%20normal/tube/Screenshot%202025-12-08%2010.03.36%20AM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/mom/boots/Screenshot%202025-12-08%2010.27.12%20AM.png]] <</if>> </div> <div class="layout-text"> <<type 35ms>>you stand by and watch five people die, you could have easily spared them<</type>> <<button "next" "nothing 4">><<script>>/* (code) */<</script>><</button>> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div>

<<type 35ms>>in this game you will face a range of scenarios. make your decision and see how it plays out. every choice you make says something about you, lets find out what it says. $name, press "start" when you are ready to continue. This is you! $you <<button "Start" "trolley">><<script>>/* (code) */<</script>><</button>> <</type>>

this is a font test so i dont forget [[font2]] [[font3]]

this is a font test so i dont forget [[font1]] [[font2]]

this is a font test so i dont forget [[font1]] [[font3]]

<div class="timer-bar"></div><<timed 20s>><<goto "TimeoutPassage">><</timed>><div <div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/trolley%20normal/tube/Screenshot%202025-12-08%2010.03.42%20AM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/trolley%20normal/boots/Screenshot%202025-12-08%2010.33.55%20AM.png]] <</if>> </div> <div class="layout-text"> <<type 35ms>>Oh no! A trolley is heading towards five people. You can pull the lever to divert it to the other track, killing one person instead. What do you do?<</type>> <<button "pull lever">> <<set $choiceA to $choiceA+1>> <<goto "pull lever 1">> <</button>> <<button "do nothing">> <<set $choiceB to $choiceB+5>> <<goto "do nothing 1">> <</button>> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div>

<div class="timer-bar"></div><<timed 20s>><<goto "TimeoutPassage">><</timed>><div <div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/mom/tube/Screenshot%202025-12-07%2010.27.46%20PM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/mom/boots/Screenshot%202025-12-08%2010.27.03%20AM.png]] <</if>> </div> <div class="layout-text"> <<type 35ms>>There’s an out-of-control trolley speeding towards five people. You have the ability to pull a lever and change the trolley’s path so it hits just one person instead. But get this: that one person? It’s $mom, yeah, your fucking mom.<</type>> <<button "pull lever">> <<set $choiceA to $choiceA+1>> <<goto "pull lever 2">> <</button>> <<button "do nothing">> <<set $choiceB to $choiceB+5>> <<goto "do nothing2">> <</button>> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div>

<div class="timer-bar"></div><<timed 20s>><<goto "TimeoutPassage">><</timed>><div <div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/faith/Screenshot%202025-12-10%202.46.47%20PM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/faith/Screenshot%202025-12-10%202.47.02%20PM.png]] <</if>> </div> <div class="layout-text"> <<type 35ms>>To switch the trolley onto an empty track it requires that you continue to hold the lever down until the day that you die. Nobody can take over for you, you must hold it yourself. However the existence of the trolley itself is both unverifiable and unfalsifiable. You will not know if it exists until the moment of your death. <</type>> <<button "pull lever">> <<set $choiceA to $choiceA+0>> <<goto "hold lever">> <</button>> <<button "let them die">> <<set $choiceB to $choiceB+5>> <<goto "let them die 1">> <</button>> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div>

<div class="timer-bar"></div><<timed 20s>><<goto "TimeoutPassage">><</timed>><div <div class="layout-flex"> <div class="layout-image"> <img src="yourimage.jpg"> </div> <div class="layout-text"> <<type 35ms>>There’s an out-of-control trolley speeding towards five people. You’re in a nearby café, sipping on $drink, and don’t notice. The people die. <</type>> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div>

<div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/trolley%20normal/tube/Screenshot%202025-12-08%2010.03.45%20AM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/mom/boots/Screenshot%202025-12-08%2010.27.00%20AM.png]] <</if>> </div> <div class="layout-text"> you pull the lever killing $mom.... <<button "next" "pull lever mom">><<script>>/* (code) */<</script>><</button>> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div> <<run startGlitch(3000)>>

<div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/trolley%20normal/tube/Screenshot%202025-12-08%2010.03.39%20AM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/mom/boots/Screenshot%202025-12-08%2010.27.07%20AM.png]] <</if>> </div> <div class="layout-text"> you stand by and watch five people die. <<button "next" "do nothing mom">><<script>>/* (code) */<</script>><</button>> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div> <<run startGlitch(3000)>>

<<glitch>> SYSTEM ERROR <</glitch>>

<div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/trolley%20normal/tube/Screenshot%202025-12-08%2010.03.45%20AM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/mom/boots/Screenshot%202025-12-08%2010.27.00%20AM.png]] <</if>> </div> <div class="layout-text"> <<type 35ms>>you pull the lever<</type>> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div> <<run startGlitch(3000)>> <<timed 3s>><<goto "pull lever">><</timed>>

<div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/trolley%20normal/tube/Screenshot%202025-12-08%2010.03.39%20AM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/mom/boots/Screenshot%202025-12-08%2010.27.07%20AM.png]] <</if>> </div> <div class="layout-text"> <<type 35ms>>you do nothing<</type>> <<timed 3s>><<goto "do nothing">><</timed>> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div> <<run startGlitch(3000)>>

<div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/trolley%20normal/tube/Screenshot%202025-12-08%2010.03.48%20AM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/mom/boots/Screenshot%202025-12-08%2010.28.45%20AM.png]] <</if>> </div> <div class="layout-text"> <<glitch>>you don't show mercy, not even to your own mother. <</glitch>> <<button "next" "faith">><<script>>/* (code) */<</script>><</button>> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div>

<div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/trolley%20normal/tube/Screenshot%202025-12-08%2010.03.36%20AM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/mom/boots/Screenshot%202025-12-08%2010.27.12%20AM.png]] <</if>> </div> <div class="layout-text"> but, hey! at least mom is alive <<button "next" "faith">><<script>>/* (code) */<</script>><</button>> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div>

<<type 35ms>>usually after a person kills someone they feel bad about it.<</type>> <<button "next" "the real stinker">><<script>>/* (code) */<</script>><</button>> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div>

<div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/faith/Screenshot%202025-12-10%202.35.53%20PM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/faith/Screenshot%202025-12-10%202.40.36%20PM.png]] <</if>> </div> <div class="layout-text"> you walk away </div> </div> <<button "next" "let them die">><<script>>/* (code) */<</script>><</button>> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div>

<div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/faith/Screenshot%202025-12-10%202.54.03%20PM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/faith/Screenshot%202025-12-10%202.54.03%20PM.png]] <</if>> </div> <div class="layout-text"> you will never know if they died or not, but who really cares anyway. </div> </div> <<button "next" "final pull lever">><<script>>/* (code) */<</script>><</button>> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div>

<div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/faith/Screenshot%202025-12-10%202.46.54%20PM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/faith/Screenshot%202025-12-10%202.47.09%20PM.png]] <</if>> </div> <div class="layout-text"> you don't know if the train will ever come </div> </div> <<button "next" "lever 6">><<script>>/* (code) */<</script>><</button>> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div>

<div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/faith/Screenshot%202025-12-10%202.46.54%20PM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/faith/Screenshot%202025-12-10%202.47.09%20PM.png]] <</if>> </div> <div class="layout-text"> you hold down the lever </div> </div> <<button "next" "hold lever">><<script>>/* (code) */<</script>><</button>> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div>

<<type 35ms>>regardless, you made your decision and you must stick with it. As you stand there you wonder what got you here. was pulling the lever worth it to save those people....<</type>> <<button "next" "final pull lever">><<script>>/* (code) */<</script>><</button>> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div>

this is the next passage

<<set $you = "warrior.png">> <img src="images/{$you}" alt="You">

<div class="hey"> <<=passage()>>  "hey whats up" </div>

<<run startGlitch(3000)>>

<div class="layout-flex"> <div class="layout-image"> <img src="yourimage.jpg"> </div> <div class="layout-text"> This is where your passage text goes. You can put *any Twine code* here, including links: <<link "Next">><<goto "NextPassage">><</link>> </div> </div>

<div id="glitchContainer">This text will glitch after 5 seconds…</div> <script> // Run after passage is displayed setTimeout(function() { // Add glitch class const el = document.getElementById("glitchContainer"); if (el) el.classList.add("glitch"); // After glitch starts, wait 2s then go to next passage setTimeout(function() { Engine.play("glitch 2"); }, 800); }, 5000); // 5-second delay before glitch </script>

<<run window.stopTimer()>> <div style="text-align:center; margin-top: 50px;"> <h1>⏰ Time's up!</h1> <p>You failed to answer in time.</p> <<link "Try Again">><<goto "start">><</link>> </div>

<div class="timer-bar"></div><<timed 20s>><<goto "TimeoutPassage">><</timed>><div

<<set $choiceA to 0>> <<set $choiceB to 0>> <<set $you = "default">> <<widget "youImage">> <<print $you>> <</widget>>

<<type 35ms>>usually after someone lets people die they feel bad about it.<</type>> <<button "next" "stinker">><<script>>/* (code) */<</script>><</button>> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div>

<div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/trolley%20normal/tube/Screenshot%202025-12-08%2010.03.36%20AM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/mom/boots/Screenshot%202025-12-08%2010.27.12%20AM.png]] <</if>> </div> <div class="layout-text"> but, hey! at least mom is alive <<button "next" "faith 2">><<script>>/* (code) */<</script>><</button>> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div>

<div class="timer-bar"></div><<timed 20s>><<goto "TimeoutPassage">><</timed>><div <div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/mom/tube/Screenshot%202025-12-07%2010.27.46%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/pull%20lever%20mom/tube/Screenshot%202025-12-07%2010.27.46%20PM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/mom/boots/Screenshot%202025-12-08%2010.27.03%20AM.png]] <</if>> </div> <div class="layout-text"> <<type 35ms>>There’s an out-of-control trolley speeding towards five people. You have the ability to pull a lever and change the trolley’s path so it hits just one person instead. But get this: that one person? It’s $mom, yeah, your fucking mom.<</type>> <<button "pull lever">> <<set $choiceA to $choiceA+1>> <<goto "pull lever 4">> <</button>> <<button "do nothing">> <<set $choiceB to $choiceB+5>> <<goto "do nothing 3">> <</button>> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div>

<div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/trolley%20normal/tube/Screenshot%202025-12-08%2010.03.48%20AM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/mom/boots/Screenshot%202025-12-08%2010.28.45%20AM.png]] <</if>> </div> <div class="layout-text"> <<glitch>>you don't show mercy, not even to your own mother. <</glitch>> <<button "next" "faith 2">><<script>>/* (code) */<</script>><</button>> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div>

<div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/trolley%20normal/tube/Screenshot%202025-12-08%2010.03.45%20AM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/mom/boots/Screenshot%202025-12-08%2010.27.00%20AM.png]] <</if>> </div> <div class="layout-text"> you pull the lever killing $mom.... <<button "next" "pull lever mom 2">><<script>>/* (code) */<</script>><</button>> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div> <<run startGlitch(3000)>>

<div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/trolley%20normal/tube/Screenshot%202025-12-08%2010.03.39%20AM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/mom/boots/Screenshot%202025-12-08%2010.27.07%20AM.png]] <</if>> </div> <div class="layout-text"> you stand by and watch five people die. <<timed 3s>><<goto "do nothing mom 2">><</timed>> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div> <<run startGlitch(3000)>>

<div class="timer-bar"></div><<timed 20s>><<goto "TimeoutPassage">><</timed>><div <div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/faith/Screenshot%202025-12-10%202.46.47%20PM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/faith/Screenshot%202025-12-10%202.47.02%20PM.png]] <</if>> </div> <div class="layout-text"> <<type 35ms>>To switch the trolley onto an empty track it requires that you continue to hold the lever down until the day that you die. Nobody can take over for you, you must hold it yourself. However the existence of the trolley itself is both unverifiable and unfalsifiable. You will not know if it exists until the moment of your death. <</type>> <<button "pull lever">> <<set $choiceA to $choiceA+0>> <<goto "hold lever 2">> <</button>> <<button "walk away">> <<set $choiceB to $choiceB+5>> <<goto "let them die 4">> <</button>> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div>

<div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/faith/Screenshot%202025-12-10%202.46.54%20PM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/faith/Screenshot%202025-12-10%202.47.09%20PM.png]] <</if>> </div> <div class="layout-text"> you don't know if the train will ever come </div> </div> <<button "next" "lever 6">><<script>>/* (code) */<</script>><</button>> <div class="blackbox"> ? have died because of you You let ? die </div>

<div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/faith/Screenshot%202025-12-10%202.46.54%20PM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/faith/Screenshot%202025-12-10%202.47.09%20PM.png]] <</if>> </div> <div class="layout-text"> you hold down the lever </div> </div> <<button "next" "hold lever 3">><<script>>/* (code) */<</script>><</button>> <div class="blackbox"> ? have died because of you You let ? die </div>

<div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/faith/Screenshot%202025-12-10%202.54.03%20PM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/faith/Screenshot%202025-12-10%202.54.03%20PM.png]] <</if>> </div> <div class="layout-text"> you will never know if they died or not, but who really cares anyway. </div> </div> <<button "next" "final do nothing">><<script>>/* (code) */<</script>><</button>> <div class="blackbox"> ? have died because of you You let ? die </div>

<div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/faith/Screenshot%202025-12-10%202.35.53%20PM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/faith/Screenshot%202025-12-10%202.40.36%20PM.png]] <</if>> </div> <div class="layout-text"> you walk away </div> </div> <<timed 3s>><<goto "let them die 2">><</timed>> <div class="blackbox"> ? have died because of you You let ? die </div>

<<type 35ms>>regardless, you made your decision and you must stick with it. As you stand there you wonder what got you here. was pulling the lever worth it to save those people. you let people die to get to this point so why change now?<</type>> <<button "next" "ending 1">><<script>>/* (code) */<</script>><</button>> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div>

<div class="timer-bar"></div><<timed 20s>><<goto "final 2">><</timed>><div <div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/final%202/Screenshot%202025-12-10%203.15.18%20PM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/final%202/Screenshot%202025-12-10%203.15.21%20PM.png]] <</if>> </div> <div class="layout-text"> <<type 35ms>>you find yourself laying next to four people on the track<</type>> <button id="triggerError">Pull Lever</button> <button id="triggerError1">Do Nothing</button> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div> <script> document.getElementById("triggerError").onclick = function () { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); }; </script> <style> /* full-screen red background */ #error-container { position: fixed; inset: 0; background: #a00000; color: #fff; font-family: monospace; font-size: 2em; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; animation: flash 0.15s infinite; z-index: 99999; } /* flashing effect */ @keyframes flash { 0% { background-color: #700000; } 50% { background-color: #ff0000; } 100% { background-color: #700000; } } /* glitch container */ .glitch { position: relative; display: inline-block; } /* glitch layers */ .glitch:before, .glitch:after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; clip: rect(0, 900px, 0, 0); } .glitch:before { left: 2px; text-shadow: -2px 0 #0ff; animation: glitchTop 0.75s infinite linear alternate-reverse; } .glitch:after { left: -2px; text-shadow: -2px 0 #f0f; animation: glitchBottom 0.65s infinite linear alternate-reverse; } /* glitch animations */ @keyframes glitchTop { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(0, 900px, 40px, 0); } 40% { clip: rect(0, 900px, 10px, 0); } 60% { clip: rect(0, 900px, 60px, 0); } 80% { clip: rect(0, 900px, 30px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } @keyframes glitchBottom { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(20px, 900px, 60px, 0); } 40% { clip: rect(10px, 900px, 30px, 0); } 60% { clip: rect(40px, 900px, 80px, 0); } 80% { clip: rect(30px, 900px, 50px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } </style> <script> document.getElementById("triggerError1").onclick = function () { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); }; </script> <style> /* full-screen red background */ #error-container { position: fixed; inset: 0; background: #a00000; color: #fff; font-family: monospace; font-size: 2em; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; animation: flash 0.15s infinite; z-index: 99999; } /* flashing effect */ @keyframes flash { 0% { background-color: #700000; } 50% { background-color: #ff0000; } 100% { background-color: #700000; } } /* glitch container */ .glitch { position: relative; display: inline-block; } /* glitch layers */ .glitch:before, .glitch:after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; clip: rect(0, 900px, 0, 0); } .glitch:before { left: 2px; text-shadow: -2px 0 #0ff; animation: glitchTop 0.75s infinite linear alternate-reverse; } .glitch:after { left: -2px; text-shadow: -2px 0 #f0f; animation: glitchBottom 0.65s infinite linear alternate-reverse; } /* glitch animations */ @keyframes glitchTop { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(0, 900px, 40px, 0); } 40% { clip: rect(0, 900px, 10px, 0); } 60% { clip: rect(0, 900px, 60px, 0); } 80% { clip: rect(0, 900px, 30px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } @keyframes glitchBottom { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(20px, 900px, 60px, 0); } 40% { clip: rect(10px, 900px, 30px, 0); } 60% { clip: rect(40px, 900px, 80px, 0); } 80% { clip: rect(30px, 900px, 50px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } </style> <script> function showSystemError() { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); // Remove the overlay after 2 seconds setTimeout(function() { div.remove(); }, 2000); // 2000ms = 2 seconds } // Attach click events document.getElementById("triggerError").onclick = showSystemError; document.getElementById("triggerError1").onclick = showSystemError; </script>

<div class="timer-bar"></div><<timed 20s>><<goto "final 5">><</timed>><div <div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/final/Screenshot%202025-12-10%203.05.06%20PM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/final/Screenshot%202025-12-10%203.05.12%20PM.png]] <</if>> </div> <div class="layout-text"> <<type 35ms>>you struggle but nothing seems to work. you look towards the lever and notice something. the person by the lever looks familiar, it looks like...<</type>> <button id="triggerError">Pull Lever</button> <button id="triggerError1">Do Nothing</button> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div> <script> document.getElementById("triggerError").onclick = function () { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); }; </script> <style> /* full-screen red background */ #error-container { position: fixed; inset: 0; background: #a00000; color: #fff; font-family: monospace; font-size: 2em; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; animation: flash 0.15s infinite; z-index: 99999; } /* flashing effect */ @keyframes flash { 0% { background-color: #700000; } 50% { background-color: #ff0000; } 100% { background-color: #700000; } } /* glitch container */ .glitch { position: relative; display: inline-block; } /* glitch layers */ .glitch:before, .glitch:after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; clip: rect(0, 900px, 0, 0); } .glitch:before { left: 2px; text-shadow: -2px 0 #0ff; animation: glitchTop 0.75s infinite linear alternate-reverse; } .glitch:after { left: -2px; text-shadow: -2px 0 #f0f; animation: glitchBottom 0.65s infinite linear alternate-reverse; } /* glitch animations */ @keyframes glitchTop { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(0, 900px, 40px, 0); } 40% { clip: rect(0, 900px, 10px, 0); } 60% { clip: rect(0, 900px, 60px, 0); } 80% { clip: rect(0, 900px, 30px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } @keyframes glitchBottom { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(20px, 900px, 60px, 0); } 40% { clip: rect(10px, 900px, 30px, 0); } 60% { clip: rect(40px, 900px, 80px, 0); } 80% { clip: rect(30px, 900px, 50px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } </style> <script> document.getElementById("triggerError1").onclick = function () { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); }; </script> <style> /* full-screen red background */ #error-container { position: fixed; inset: 0; background: #a00000; color: #fff; font-family: monospace; font-size: 2em; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; animation: flash 0.15s infinite; z-index: 99999; } /* flashing effect */ @keyframes flash { 0% { background-color: #700000; } 50% { background-color: #ff0000; } 100% { background-color: #700000; } } /* glitch container */ .glitch { position: relative; display: inline-block; } /* glitch layers */ .glitch:before, .glitch:after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; clip: rect(0, 900px, 0, 0); } .glitch:before { left: 2px; text-shadow: -2px 0 #0ff; animation: glitchTop 0.75s infinite linear alternate-reverse; } .glitch:after { left: -2px; text-shadow: -2px 0 #f0f; animation: glitchBottom 0.65s infinite linear alternate-reverse; } /* glitch animations */ @keyframes glitchTop { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(0, 900px, 40px, 0); } 40% { clip: rect(0, 900px, 10px, 0); } 60% { clip: rect(0, 900px, 60px, 0); } 80% { clip: rect(0, 900px, 30px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } @keyframes glitchBottom { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(20px, 900px, 60px, 0); } 40% { clip: rect(10px, 900px, 30px, 0); } 60% { clip: rect(40px, 900px, 80px, 0); } 80% { clip: rect(30px, 900px, 50px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } </style> <script> function showSystemError() { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); // Remove the overlay after 2 seconds setTimeout(function() { div.remove(); }, 2000); // 2000ms = 2 seconds } // Attach click events document.getElementById("triggerError").onclick = showSystemError; document.getElementById("triggerError1").onclick = showSystemError; </script>

<div class="timer-bar"></div><<timed 20s>><<goto "final 1">><</timed>><div <div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/final/Screenshot%202025-12-10%203.05.01%20PM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/final/Screenshot%202025-12-10%203.05.08%20PM.png]] <</if>> </div> <div class="layout-text"> <<type 35ms>>you find yourself laying alone on a track<</type>> <button id="triggerError">Pull Lever</button> <button id="triggerError1">Do Nothing</button> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div> <script> document.getElementById("triggerError").onclick = function () { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); }; </script> <style> /* full-screen red background */ #error-container { position: fixed; inset: 0; background: #a00000; color: #fff; font-family: monospace; font-size: 2em; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; animation: flash 0.15s infinite; z-index: 99999; } /* flashing effect */ @keyframes flash { 0% { background-color: #700000; } 50% { background-color: #ff0000; } 100% { background-color: #700000; } } /* glitch container */ .glitch { position: relative; display: inline-block; } /* glitch layers */ .glitch:before, .glitch:after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; clip: rect(0, 900px, 0, 0); } .glitch:before { left: 2px; text-shadow: -2px 0 #0ff; animation: glitchTop 0.75s infinite linear alternate-reverse; } .glitch:after { left: -2px; text-shadow: -2px 0 #f0f; animation: glitchBottom 0.65s infinite linear alternate-reverse; } /* glitch animations */ @keyframes glitchTop { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(0, 900px, 40px, 0); } 40% { clip: rect(0, 900px, 10px, 0); } 60% { clip: rect(0, 900px, 60px, 0); } 80% { clip: rect(0, 900px, 30px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } @keyframes glitchBottom { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(20px, 900px, 60px, 0); } 40% { clip: rect(10px, 900px, 30px, 0); } 60% { clip: rect(40px, 900px, 80px, 0); } 80% { clip: rect(30px, 900px, 50px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } </style> <script> document.getElementById("triggerError1").onclick = function () { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); }; </script> <style> /* full-screen red background */ #error-container { position: fixed; inset: 0; background: #a00000; color: #fff; font-family: monospace; font-size: 2em; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; animation: flash 0.15s infinite; z-index: 99999; } /* flashing effect */ @keyframes flash { 0% { background-color: #700000; } 50% { background-color: #ff0000; } 100% { background-color: #700000; } } /* glitch container */ .glitch { position: relative; display: inline-block; } /* glitch layers */ .glitch:before, .glitch:after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; clip: rect(0, 900px, 0, 0); } .glitch:before { left: 2px; text-shadow: -2px 0 #0ff; animation: glitchTop 0.75s infinite linear alternate-reverse; } .glitch:after { left: -2px; text-shadow: -2px 0 #f0f; animation: glitchBottom 0.65s infinite linear alternate-reverse; } /* glitch animations */ @keyframes glitchTop { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(0, 900px, 40px, 0); } 40% { clip: rect(0, 900px, 10px, 0); } 60% { clip: rect(0, 900px, 60px, 0); } 80% { clip: rect(0, 900px, 30px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } @keyframes glitchBottom { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(20px, 900px, 60px, 0); } 40% { clip: rect(10px, 900px, 30px, 0); } 60% { clip: rect(40px, 900px, 80px, 0); } 80% { clip: rect(30px, 900px, 50px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } </style> <script> function showSystemError() { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); // Remove the overlay after 2 seconds setTimeout(function() { div.remove(); }, 2000); // 2000ms = 2 seconds } // Attach click events document.getElementById("triggerError").onclick = showSystemError; document.getElementById("triggerError1").onclick = showSystemError; </script>

<div class="timer-bar"></div><<timed 20s>><<goto "final 3">><</timed>><div <div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/final%202/Screenshot%202025-12-10%203.15.18%20PM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/final%202/Screenshot%202025-12-10%203.15.21%20PM.png]] <</if>> </div> <div class="layout-text"> <<type 35ms>>you can't seem to do much of anything. you look to the person by the lever.. they look very familiar.. it looks like... <</type>> <button id="triggerError">Pull Lever</button> <button id="triggerError1">Do Nothing</button> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div> <script> document.getElementById("triggerError").onclick = function () { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); }; </script> <style> /* full-screen red background */ #error-container { position: fixed; inset: 0; background: #a00000; color: #fff; font-family: monospace; font-size: 2em; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; animation: flash 0.15s infinite; z-index: 99999; } /* flashing effect */ @keyframes flash { 0% { background-color: #700000; } 50% { background-color: #ff0000; } 100% { background-color: #700000; } } /* glitch container */ .glitch { position: relative; display: inline-block; } /* glitch layers */ .glitch:before, .glitch:after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; clip: rect(0, 900px, 0, 0); } .glitch:before { left: 2px; text-shadow: -2px 0 #0ff; animation: glitchTop 0.75s infinite linear alternate-reverse; } .glitch:after { left: -2px; text-shadow: -2px 0 #f0f; animation: glitchBottom 0.65s infinite linear alternate-reverse; } /* glitch animations */ @keyframes glitchTop { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(0, 900px, 40px, 0); } 40% { clip: rect(0, 900px, 10px, 0); } 60% { clip: rect(0, 900px, 60px, 0); } 80% { clip: rect(0, 900px, 30px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } @keyframes glitchBottom { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(20px, 900px, 60px, 0); } 40% { clip: rect(10px, 900px, 30px, 0); } 60% { clip: rect(40px, 900px, 80px, 0); } 80% { clip: rect(30px, 900px, 50px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } </style> <script> document.getElementById("triggerError1").onclick = function () { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); }; </script> <style> /* full-screen red background */ #error-container { position: fixed; inset: 0; background: #a00000; color: #fff; font-family: monospace; font-size: 2em; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; animation: flash 0.15s infinite; z-index: 99999; } /* flashing effect */ @keyframes flash { 0% { background-color: #700000; } 50% { background-color: #ff0000; } 100% { background-color: #700000; } } /* glitch container */ .glitch { position: relative; display: inline-block; } /* glitch layers */ .glitch:before, .glitch:after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; clip: rect(0, 900px, 0, 0); } .glitch:before { left: 2px; text-shadow: -2px 0 #0ff; animation: glitchTop 0.75s infinite linear alternate-reverse; } .glitch:after { left: -2px; text-shadow: -2px 0 #f0f; animation: glitchBottom 0.65s infinite linear alternate-reverse; } /* glitch animations */ @keyframes glitchTop { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(0, 900px, 40px, 0); } 40% { clip: rect(0, 900px, 10px, 0); } 60% { clip: rect(0, 900px, 60px, 0); } 80% { clip: rect(0, 900px, 30px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } @keyframes glitchBottom { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(20px, 900px, 60px, 0); } 40% { clip: rect(10px, 900px, 30px, 0); } 60% { clip: rect(40px, 900px, 80px, 0); } 80% { clip: rect(30px, 900px, 50px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } </style> <script> function showSystemError() { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); // Remove the overlay after 2 seconds setTimeout(function() { div.remove(); }, 2000); // 2000ms = 2 seconds } // Attach click events document.getElementById("triggerError").onclick = showSystemError; document.getElementById("triggerError1").onclick = showSystemError; </script>

Created by Finn Gordon, 2025 Drawn on Flipaclip Programed on Twine.org Special thanks to Carl Deihl (: <<button "next" "ending">><<script>>/* (code) */<</script>><</button>>

<div class="timer-bar"></div><<timed 20s>><<goto "final 4">><</timed>><div <div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/final%202/Screenshot%202025-12-10%203.19.24%20PM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/final%202/Screenshot%202025-12-10%203.19.27%20PM.png]] <</if>> </div> <div class="layout-text"> <<type 35ms>>you! but wait, you don't seem very eager to pull the lever..<</type>> <button id="triggerError">Pull Lever</button> <button id="triggerError1">Do Nothing</button> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div> <script> document.getElementById("triggerError").onclick = function () { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); }; </script> <style> /* full-screen red background */ #error-container { position: fixed; inset: 0; background: #a00000; color: #fff; font-family: monospace; font-size: 2em; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; animation: flash 0.15s infinite; z-index: 99999; } /* flashing effect */ @keyframes flash { 0% { background-color: #700000; } 50% { background-color: #ff0000; } 100% { background-color: #700000; } } /* glitch container */ .glitch { position: relative; display: inline-block; } /* glitch layers */ .glitch:before, .glitch:after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; clip: rect(0, 900px, 0, 0); } .glitch:before { left: 2px; text-shadow: -2px 0 #0ff; animation: glitchTop 0.75s infinite linear alternate-reverse; } .glitch:after { left: -2px; text-shadow: -2px 0 #f0f; animation: glitchBottom 0.65s infinite linear alternate-reverse; } /* glitch animations */ @keyframes glitchTop { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(0, 900px, 40px, 0); } 40% { clip: rect(0, 900px, 10px, 0); } 60% { clip: rect(0, 900px, 60px, 0); } 80% { clip: rect(0, 900px, 30px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } @keyframes glitchBottom { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(20px, 900px, 60px, 0); } 40% { clip: rect(10px, 900px, 30px, 0); } 60% { clip: rect(40px, 900px, 80px, 0); } 80% { clip: rect(30px, 900px, 50px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } </style> <script> document.getElementById("triggerError1").onclick = function () { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); }; </script> <style> /* full-screen red background */ #error-container { position: fixed; inset: 0; background: #a00000; color: #fff; font-family: monospace; font-size: 2em; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; animation: flash 0.15s infinite; z-index: 99999; } /* flashing effect */ @keyframes flash { 0% { background-color: #700000; } 50% { background-color: #ff0000; } 100% { background-color: #700000; } } /* glitch container */ .glitch { position: relative; display: inline-block; } /* glitch layers */ .glitch:before, .glitch:after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; clip: rect(0, 900px, 0, 0); } .glitch:before { left: 2px; text-shadow: -2px 0 #0ff; animation: glitchTop 0.75s infinite linear alternate-reverse; } .glitch:after { left: -2px; text-shadow: -2px 0 #f0f; animation: glitchBottom 0.65s infinite linear alternate-reverse; } /* glitch animations */ @keyframes glitchTop { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(0, 900px, 40px, 0); } 40% { clip: rect(0, 900px, 10px, 0); } 60% { clip: rect(0, 900px, 60px, 0); } 80% { clip: rect(0, 900px, 30px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } @keyframes glitchBottom { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(20px, 900px, 60px, 0); } 40% { clip: rect(10px, 900px, 30px, 0); } 60% { clip: rect(40px, 900px, 80px, 0); } 80% { clip: rect(30px, 900px, 50px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } </style> <script> function showSystemError() { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); // Remove the overlay after 2 seconds setTimeout(function() { div.remove(); }, 2000); // 2000ms = 2 seconds } // Attach click events document.getElementById("triggerError").onclick = showSystemError; document.getElementById("triggerError1").onclick = showSystemError; </script>

<div class="timer-bar"></div><<timed 20s>><<goto "final 6">><</timed>><div <div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/final/Screenshot%202025-12-10%203.10.22%20PM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/final/Screenshot%202025-12-10%203.10.27%20PM.png]] <</if>> </div> <div class="layout-text"> <<type 35ms>>you! but wait, it looks like you are going to pull the lever and move the trolley onto the track you are laying on..<</type>> <button id="triggerError">Pull Lever</button> <button id="triggerError1">Do Nothing</button> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div> <script> document.getElementById("triggerError").onclick = function () { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); }; </script> <style> /* full-screen red background */ #error-container { position: fixed; inset: 0; background: #a00000; color: #fff; font-family: monospace; font-size: 2em; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; animation: flash 0.15s infinite; z-index: 99999; } /* flashing effect */ @keyframes flash { 0% { background-color: #700000; } 50% { background-color: #ff0000; } 100% { background-color: #700000; } } /* glitch container */ .glitch { position: relative; display: inline-block; } /* glitch layers */ .glitch:before, .glitch:after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; clip: rect(0, 900px, 0, 0); } .glitch:before { left: 2px; text-shadow: -2px 0 #0ff; animation: glitchTop 0.75s infinite linear alternate-reverse; } .glitch:after { left: -2px; text-shadow: -2px 0 #f0f; animation: glitchBottom 0.65s infinite linear alternate-reverse; } /* glitch animations */ @keyframes glitchTop { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(0, 900px, 40px, 0); } 40% { clip: rect(0, 900px, 10px, 0); } 60% { clip: rect(0, 900px, 60px, 0); } 80% { clip: rect(0, 900px, 30px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } @keyframes glitchBottom { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(20px, 900px, 60px, 0); } 40% { clip: rect(10px, 900px, 30px, 0); } 60% { clip: rect(40px, 900px, 80px, 0); } 80% { clip: rect(30px, 900px, 50px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } </style> <script> document.getElementById("triggerError1").onclick = function () { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); }; </script> <style> /* full-screen red background */ #error-container { position: fixed; inset: 0; background: #a00000; color: #fff; font-family: monospace; font-size: 2em; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; animation: flash 0.15s infinite; z-index: 99999; } /* flashing effect */ @keyframes flash { 0% { background-color: #700000; } 50% { background-color: #ff0000; } 100% { background-color: #700000; } } /* glitch container */ .glitch { position: relative; display: inline-block; } /* glitch layers */ .glitch:before, .glitch:after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; clip: rect(0, 900px, 0, 0); } .glitch:before { left: 2px; text-shadow: -2px 0 #0ff; animation: glitchTop 0.75s infinite linear alternate-reverse; } .glitch:after { left: -2px; text-shadow: -2px 0 #f0f; animation: glitchBottom 0.65s infinite linear alternate-reverse; } /* glitch animations */ @keyframes glitchTop { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(0, 900px, 40px, 0); } 40% { clip: rect(0, 900px, 10px, 0); } 60% { clip: rect(0, 900px, 60px, 0); } 80% { clip: rect(0, 900px, 30px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } @keyframes glitchBottom { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(20px, 900px, 60px, 0); } 40% { clip: rect(10px, 900px, 30px, 0); } 60% { clip: rect(40px, 900px, 80px, 0); } 80% { clip: rect(30px, 900px, 50px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } </style> <script> function showSystemError() { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); // Remove the overlay after 2 seconds setTimeout(function() { div.remove(); }, 2000); // 2000ms = 2 seconds } // Attach click events document.getElementById("triggerError").onclick = showSystemError; document.getElementById("triggerError1").onclick = showSystemError; </script>

<div class="blackbox"> $choiceA have died because of you You let $choiceB die </div> <<timed 5s>><<goto "credits">><</timed>>

<<button "restart" "restart">><<script>>/* (code) */<</script>><</button>>

<div class="timer-bar"></div><<timed 20s>><<goto "ending 1">><</timed>><div <div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/final%202/Screenshot%202025-12-10%203.19.24%20PM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/final%202/Screenshot%202025-12-10%203.19.27%20PM.png]] <</if>> </div> <div class="layout-text"> <<type 35ms>>the trolley is approaching quickly, there is nothing you can do but wait for the trolley to hit you and the others. If only you had chosen to pull the lever, you would have been saved.<</type>> <button id="triggerError">Pull Lever</button> <button id="triggerError1">Do Nothing</button> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div> <script> document.getElementById("triggerError").onclick = function () { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); }; </script> <style> /* full-screen red background */ #error-container { position: fixed; inset: 0; background: #a00000; color: #fff; font-family: monospace; font-size: 2em; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; animation: flash 0.15s infinite; z-index: 99999; } /* flashing effect */ @keyframes flash { 0% { background-color: #700000; } 50% { background-color: #ff0000; } 100% { background-color: #700000; } } /* glitch container */ .glitch { position: relative; display: inline-block; } /* glitch layers */ .glitch:before, .glitch:after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; clip: rect(0, 900px, 0, 0); } .glitch:before { left: 2px; text-shadow: -2px 0 #0ff; animation: glitchTop 0.75s infinite linear alternate-reverse; } .glitch:after { left: -2px; text-shadow: -2px 0 #f0f; animation: glitchBottom 0.65s infinite linear alternate-reverse; } /* glitch animations */ @keyframes glitchTop { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(0, 900px, 40px, 0); } 40% { clip: rect(0, 900px, 10px, 0); } 60% { clip: rect(0, 900px, 60px, 0); } 80% { clip: rect(0, 900px, 30px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } @keyframes glitchBottom { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(20px, 900px, 60px, 0); } 40% { clip: rect(10px, 900px, 30px, 0); } 60% { clip: rect(40px, 900px, 80px, 0); } 80% { clip: rect(30px, 900px, 50px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } </style> <script> document.getElementById("triggerError1").onclick = function () { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); }; </script> <style> /* full-screen red background */ #error-container { position: fixed; inset: 0; background: #a00000; color: #fff; font-family: monospace; font-size: 2em; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; animation: flash 0.15s infinite; z-index: 99999; } /* flashing effect */ @keyframes flash { 0% { background-color: #700000; } 50% { background-color: #ff0000; } 100% { background-color: #700000; } } /* glitch container */ .glitch { position: relative; display: inline-block; } /* glitch layers */ .glitch:before, .glitch:after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; clip: rect(0, 900px, 0, 0); } .glitch:before { left: 2px; text-shadow: -2px 0 #0ff; animation: glitchTop 0.75s infinite linear alternate-reverse; } .glitch:after { left: -2px; text-shadow: -2px 0 #f0f; animation: glitchBottom 0.65s infinite linear alternate-reverse; } /* glitch animations */ @keyframes glitchTop { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(0, 900px, 40px, 0); } 40% { clip: rect(0, 900px, 10px, 0); } 60% { clip: rect(0, 900px, 60px, 0); } 80% { clip: rect(0, 900px, 30px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } @keyframes glitchBottom { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(20px, 900px, 60px, 0); } 40% { clip: rect(10px, 900px, 30px, 0); } 60% { clip: rect(40px, 900px, 80px, 0); } 80% { clip: rect(30px, 900px, 50px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } </style> <script> function showSystemError() { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); // Remove the overlay after 2 seconds setTimeout(function() { div.remove(); }, 2000); // 2000ms = 2 seconds } // Attach click events document.getElementById("triggerError").onclick = showSystemError; document.getElementById("triggerError1").onclick = showSystemError; </script>

<<type 35ms>>Oh, you are back! Just back to save more people I assume. Or maybe you want to kill people again. Well, who am I to judge. $name, press "start" when you are ready to continue. This is you! $you <<button "Start" "trolley">><<script>>/* (code) */<</script>><</button>> <</type>>

<div class="timer-bar"></div><<timed 20s>><<goto "ending 1">><</timed>><div <div class="layout-flex"> <div class="layout-image"> <<if $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.21%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/final/Screenshot%202025-12-10%203.10.22%20PM.png]] <<elseif $you is "[img[https://finncoolawesome.neocities.org/trolley/Screenshot%202025-12-07%204.43.30%20PM.png]]">> [img[https://finncoolawesome.neocities.org/trolley/final/Screenshot%202025-12-10%203.10.27%20PM.png]] <</if>> </div> <div class="layout-text"> <<type 35ms>>you realize there isn't anything you can do<</type>> <button id="triggerError">Pull Lever</button> <button id="triggerError1">Do Nothing</button> </div> </div> <div class="blackbox"> $choiceA have died because of you You let $choiceB die </div> <script> document.getElementById("triggerError").onclick = function () { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); }; </script> <style> /* full-screen red background */ #error-container { position: fixed; inset: 0; background: #a00000; color: #fff; font-family: monospace; font-size: 2em; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; animation: flash 0.15s infinite; z-index: 99999; } /* flashing effect */ @keyframes flash { 0% { background-color: #700000; } 50% { background-color: #ff0000; } 100% { background-color: #700000; } } /* glitch container */ .glitch { position: relative; display: inline-block; } /* glitch layers */ .glitch:before, .glitch:after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; clip: rect(0, 900px, 0, 0); } .glitch:before { left: 2px; text-shadow: -2px 0 #0ff; animation: glitchTop 0.75s infinite linear alternate-reverse; } .glitch:after { left: -2px; text-shadow: -2px 0 #f0f; animation: glitchBottom 0.65s infinite linear alternate-reverse; } /* glitch animations */ @keyframes glitchTop { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(0, 900px, 40px, 0); } 40% { clip: rect(0, 900px, 10px, 0); } 60% { clip: rect(0, 900px, 60px, 0); } 80% { clip: rect(0, 900px, 30px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } @keyframes glitchBottom { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(20px, 900px, 60px, 0); } 40% { clip: rect(10px, 900px, 30px, 0); } 60% { clip: rect(40px, 900px, 80px, 0); } 80% { clip: rect(30px, 900px, 50px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } </style> <script> document.getElementById("triggerError1").onclick = function () { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); }; </script> <style> /* full-screen red background */ #error-container { position: fixed; inset: 0; background: #a00000; color: #fff; font-family: monospace; font-size: 2em; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; animation: flash 0.15s infinite; z-index: 99999; } /* flashing effect */ @keyframes flash { 0% { background-color: #700000; } 50% { background-color: #ff0000; } 100% { background-color: #700000; } } /* glitch container */ .glitch { position: relative; display: inline-block; } /* glitch layers */ .glitch:before, .glitch:after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; clip: rect(0, 900px, 0, 0); } .glitch:before { left: 2px; text-shadow: -2px 0 #0ff; animation: glitchTop 0.75s infinite linear alternate-reverse; } .glitch:after { left: -2px; text-shadow: -2px 0 #f0f; animation: glitchBottom 0.65s infinite linear alternate-reverse; } /* glitch animations */ @keyframes glitchTop { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(0, 900px, 40px, 0); } 40% { clip: rect(0, 900px, 10px, 0); } 60% { clip: rect(0, 900px, 60px, 0); } 80% { clip: rect(0, 900px, 30px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } @keyframes glitchBottom { 0% { clip: rect(0, 900px, 0, 0); } 20% { clip: rect(20px, 900px, 60px, 0); } 40% { clip: rect(10px, 900px, 30px, 0); } 60% { clip: rect(40px, 900px, 80px, 0); } 80% { clip: rect(30px, 900px, 50px, 0); } 100% { clip: rect(0, 900px, 0, 0); } } </style> <script> function showSystemError() { // Create the error screen overlay var div = document.createElement("div"); div.id = "error-container"; div.innerHTML = ` <div class="glitch" data-text="SYSTEM ERROR"> SYSTEM ERROR </div> `; document.body.appendChild(div); // Remove the overlay after 2 seconds setTimeout(function() { div.remove(); }, 2000); // 2000ms = 2 seconds } // Attach click events document.getElementById("triggerError").onclick = showSystemError; document.getElementById("triggerError1").onclick = showSystemError; </script>